<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Biblioteca Metadado</title>
	<link rel="stylesheet" href="css/styles.css" type="text/css" />
	
	<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
		JQ = $; //to use jquery and prototype together
	</script>
	<script type="text/javascript" src="scriptaculous/prototype.js"></script>
	<script type="text/javascript" src="scriptaculous/scriptaculous.js"></script>
	<script type="text/javascript" src="javascript/jquery.hoverIntent.minified.js"></script> 
	<script type="text/javascript" src="javascript/superfish.js"></script> 
	<script type="text/javascript" src="javascript/javascript.js"></script>
	<script type="text/javascript" src="javascript/pageAttributes.js"></script>	
	<script type="text/javascript" src="javascript/listaReserva.js"></script>
</head>

<body>
	<div id="wrap">
		<div id="header">
			<div id="logo">
				<h1><a href="index.html">Metadado</a></h1>
			</div>
			<div id="nav">
				<ul>
					<li title="Administração">
						<a>Administração</a>
						<ul class="submenu" style="display:none;position:absolute;margin-top:40px;">
							<li title="Livros"><a href="admLivro.html">Livros</a></li>
							<li title="Editoras"><a href="admEditora.html">Editoras</a></li>
							<li title="Autores"><a href="admAutor.html">Autores</a></li>
						</ul>
					</li>
					<li class="selected" title="Reservas"><a href="reserva.html">Reservas</a></li>
					<li title="Perfil"><a href="perfil.html">Perfil</a></li>
					<li title="Logout"><a href="index.html">Logout</a></li>
				</ul>
			</div>
			<div class="clear"></div>
		</div>
		<div id="page">	
			<div id="main-content">
				<h2>Reservas</h2>
				<table width="100%" cellspacing="0" style="border:solid 5px #FFFFFF;">
					<tr style="background-color:#E0CFB8;">
						<td width="100%" style="padding:5px;">
							<a id="tooglefiltro" onclick="showDiv('filtro')">Exibir Filtros</a>
						</td>
					</tr>
					<tr>
						<td>
							<div id="filtro" style="display:none;">
								<div>
									<span>Título do Livro: </span>
									<input id="titulo" type="text" class="text" />
								</div>
								<div>
									<span>Nome do Autor: </span>
									<input id="autor" type="text"  class="text" />
								</div>
								<div>
									<span>Nome da Editora: </span>
									<input id="editora" type="text"  class="text" />
								</div>
								<div>
									<span>Palavra-chave: </span>
									<input id="tag" type="text"   class="text" />
								</div>
								<div>
									<span>Disponibilidade: </span>
									<select id="disp">
										<option value="0">Todos</option>
										<option value="1">Disponíveis</option>
										<option value="2">Indisponíveis</option>							
									</select>
								</div>
								<div class="submit">
									<input type="submit" value="FILTRAR" onclick="populaLista();" />
								</div>
							</div>
						</td>
					</tr>
				</table>				
				<div id="listaReserva">
					<!-- aqui o javascript vai preencher a lista com as reservas, dependendo do valor do filtro -->
				</div>	
			</div>
			<div id="main-sidebar">	
				<div class="sidebar-box brown-box">
					<h3>Minhas reservas:</h3>
					<div id="listaReservados">
						<!-- aqui o javascript vai preencher com os livros reservados pelo usuario -->
					</div>
				</div>			
				<div class="sidebar-box brown-box">
					<p>Aqui entraria uma breve descrição sobre a funcionalidade desta página. Além disso, aqui também ficariam algumas instruções sobre como utilizar a mesma.</p>
				</div>
				<div class="sidebar-box">
					<h4>Links Úteis</h4>
					<ul>
						<li><a href="http://www.google.com" title="Google">Google</a></li>
						<li><a href="http://www.ufrj.br" title="UFRJ">UFRJ</a></li>
						<li><a href="http://www.amazon.com" title="Amazon">Amazon</a></li>
					</ul>
				</div>
			</div>
			<div id="tag-cloud" class="clear">
				<div> 
				   <a href="#" onclick="JQ('#tag').val('Romance');populaLista();" style="font-size:18px; color: #70ADF7;">Romance</a>    
				   <a href="#" onclick="JQ('#tag').val('Algoritmos');populaLista();" style="font-size:21px; color: #6094D4;">Algoritmos</a>  
				   <a href="#" onclick="JQ('#tag').val('Historia');populaLista();" style="font-size:24px; color: #70ADF7;">Historia</a>  
				   <a href="#" onclick="JQ('#tag').val('Guerra');populaLista();" style="font-size:18px; color: #426692;">Guerra</a>
				   <a href="#" onclick="JQ('#tag').val('Aventura');populaLista();" style="font-size:24px; color: #4C76A8;">Aventura</a>  
				   <a href="#" onclick="JQ('#tag').val('Programacao');populaLista();" style="font-size:21px; color: #426692;">Programacao</a>
				   <a href="#" onclick="JQ('#tag').val('Computacao');populaLista();" style="font-size:21px; color: #4C76A8;">Computacao</a>  
				   <a href="#" onclick="JQ('#tag').val('Direito');populaLista();" style="font-size:22px; color: #426692;">Direito</a>  
				   <a href="#" onclick="JQ('#tag').val('Advocacia');populaLista();" style="font-size:22px; color: #4C76A8;">Advocacia</a>  
				   <a href="#" onclick="JQ('#tag').val('Holocausto');populaLista();" style="font-size:12px; color: #426692;">Holocausto</a>  
				   <a href="#" onclick="JQ('#tag').val('Nazismo');populaLista();" style="font-size:13px; color: #70ADF7;">Nazismo</a>				   
				   <a href="#" onclick="JQ('#tag').val('Infantil');populaLista();" style="font-size:18px; color: #426692;">Infantil</a>  
				   <a href="#" onclick="JQ('#tag').val('Ditadura');populaLista();" style="font-size:14px; color: #70ADF7;">Ditadura</a>
				   <a href="#" onclick="JQ('#tag').val('Acao Penal');populaLista();" style="font-size:12px; color: #426692;">Acao Penal</a>  
				   <a href="#" onclick="JQ('#tag').val('Apelacao');populaLista();" style="font-size:13px; color: #70ADF7;">Apelacao</a>  
				   <a href="#" onclick="JQ('#tag').val('Complexidade');populaLista();" style="font-size:12px; color: #426692;">Complexidade</a>  
				   <a href="#" onclick="JQ('#tag').val('Estrutura de Dados');populaLista();" style="font-size:13px; color: #70ADF7;">Estrutura de Dados</a>
				</div>
			</div>
		</div>
		
		<div class="footer">
			<div class="footer-level-2">
				<p>
					<a href="admLivro.html">Administração</a>
					<a href="reserva.html">Reservas</a>
					<a href="perfil.html">Perfil</a>
				</p>
			</div>
		</div>
		<div class="page-end">
			<p>&copy; 2010 www.bibliotecametadado.edu.br. Webmasters: <a href="mailto:difel110185@gmail.com" title="Diego Felix">Diego Felix</a> e <a href="mailto:pedro.henrique.108@gmail.com" title="Pedro Jesus">Pedro Jesus</a></p>
		</div>
	</div>
	<script>
		JQ(document).ready(function() {
			JQ(document).ready(function(){ 
		        JQ("#nav ul").superfish(); 
		    }); 
		});
	</script>
</body>
</html>
